<template>
	<!-- 提币 -->
	<view class="mention-box">
		<nav-bar :title="i18n.mention.title" @_back="_back" rightIcon="plan" @rightClick="rightClick" />
		<view class="container">
			<custom-list :title="i18n.mention.currency">
				<view class="dis-between" @click="openCurrency">
					<text class="white-text" style="height: 40rpx;">{{info.currentcy}}</text>
					<u-icon name="arrow-down" color="rgba(255, 255, 255, .4)" size="24"></u-icon>
				</view>
			</custom-list>
			<custom-list :title="i18n.mention.chain" :isHeng="false">
				<view class="lian-box">
					<view class="default-btn" :class="lianCurrent === item.id? 'main-bg': ''" v-for="item in lianList" :key="item.id"
					 @click="lianClick(item)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</custom-list>
			<custom-list :title="i18n.mention.walletAddress">
				<view class="dis-between">
					<input type="text" v-model="info.address" :placeholder="i18n.mention.enterAddress">
					<text class="main-color" @click="walletOpen">{{i18n.common.choose}}</text>
				</view>
			</custom-list>
			<custom-list :title="i18n.mention.quantity">
				<template slot="titleRightText">
					<text>{{i18n.point.usable + '：' + usdt + ' ' + info.currentcy}}</text>
				</template>
				<view class="dis-between">
					<input v-model="info.number" type="number" :placeholder="i18n.mention.enterNumber">
					<text class="main-color" @click="allIn">{{i18n.common.all}}</text>
				</view>
			</custom-list>
			<custom-list :title="i18n.mention.charges">
				<view class="dis-between">
					<text class="white-text">{{rate | rateData(info.number)}}</text>
					<text class="white-text">{{info.currentcy}}</text>
				</view>
			</custom-list>
			<custom-list :title="i18n.common.notification" :font="32" :isHeng="false">
				<view class="notice" v-html="tx_remarks">
					<!-- <text>{{i18n.mention.notice1}}</text>
					<view>
						<text>{{i18n.mention.notice2}}</text>
					</view> -->
				</view>
			</custom-list>
			<custom-submit @click="submit" :loading="loading" style="margin: 90rpx 0 20rpx;" :title="i18n.common.confirm"></custom-submit>
		</view>
		<!-- 选择币种 -->
		<select-currency :currentId="info.currency_id" ref="sleCurrency" :list="currencyList" @click="currentCyClick"></select-currency>
		<!-- 钱包 -->
		<select-currency ref="selectWallet" :list="walletSelectList" @click="walletClick"></select-currency>
	</view>
</template>

<script>
	import minix from './mininx/index.js'
	import SelectCurrency from '@/components/SelectCurrency/vue.vue'
	import { mapGetters } from 'vuex'
	import { walletOut } from '@/api/index.js'
	import { Toast } from '@/utils/util.js'
	export default {
		mixins: [minix],
		components: {
			SelectCurrency
		},
		computed: {
			...mapGetters(['currencyList', 'walletSelectList', 'token', 'tx_remarks', 'wallet_tx_num', 'wallet_min_tx', 'wallet_max_tx']),
			i18n() {
				return this.$t('message');
			},
			
		},
		filters: {
			rateData(val, num) {
				return val * num;
			}
		},
		data() {
			return {
				info: {
					currentcy: '',
					currency_id: null,
					number: 0,
					address: '',
					rate: 0,
					links: 'ERC20'
				},
				currentcyShow: false,
				loading: false,
				usdt: 0,
				rate: 0
			}
		},
		mounted() {
			this.$nextTick(() => {
				for (let i in this.currencyList) {
					if (this.currencyList[i].title === 'USDT') {
						this.info.currency_id = this.currencyList[i].id
						this.info.currentcy = this.currencyList[i].title
						this.rate = this.currencyList[i].rate
						this.usdt = this.currencyList[i].value
					}
				}
			})
		},
		methods: {
			rightClick() {
				uni.navigateTo({
					url: '/pages/mention/record'
				})
			},
			openCurrency() {
				this.$refs.sleCurrency.open();
			},
			walletOpen() {
				this.$refs.selectWallet.open();
			},
			currentCyClick(val) {
				this.info.currentcy = val.name;
				this.info.currency_id = val.id;
				this.rate = val.rate;
				this.usdt = val.value;
			},
			walletClick(val) {
				this.info.address = val.name;
			},
			allIn() {
				this.$nextTick(() => {
					this.info.number = JSON.parse(JSON.stringify(this.usdt));
				})
			},
			async submit() {
				// if (!this.wallet_tx_num) return Toast('今日提币次数已用完');
				if(!this.info.address) return Toast(this.i18n.mention.enterAddress);
				if(this.info.number < this.wallet_min_tx || this.info.number > this.wallet_max_tx ) return Toast(this.i18n.common.manyTB + this.wallet_min_tx + '~' + this.wallet_max_tx + this.i18n.common.between);
				this.info.token = this.token;
				this.loading = true;
				this.info.rate = this.rate * this.info.number;
				let {error, res} = await walletOut(this.info);
				if(error) return this.loading = false;;
				await Toast(this.i18n.mention.success);
				// this.$store.commit('set/SET_WALLET_TX_NUM', this.wallet_tx_num - 1);
				this.loading = false;
				uni.navigateTo({
					url:'/pages/mention/record'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mention-box {
		padding-bottom: 40rpx;
	}
	.lian-box {
		display: flex;

		&>view {
			height: 80rpx;
			border-radius: 16rpx;

			&:first-child {
				margin-right: 30rpx;
			}
		}
	}

	.notice {
		color: rgba(255, 255, 255, .54);
		// font-size: 26rpx;

		// text {
		// 	line-height: 52rpx;
		// 	text-indent: -20rpx;
		// 	padding-left: 20rpx;
		// 	display: inline-block;
		// }
	}

	.cy-box {
		// height: 100%;
		padding: 0 30rpx;
		font-size: 28rpx;

		&:before {
			content: '';
			display: table;
		}

		.title {
			margin: 62rpx auto 56rpx;
			text-align: center;
			font-size: 32rpx;
		}

		.cy-container {
			display: flex;
			justify-content: space-between;
			height: 120rpx;
			align-items: center;
			border-bottom: 1px solid rgba(255, 255, 255, .1);

			&:last-child {
				border-bottom: 0;
			}
		}
	}
</style>
